<template>
  <avue-crud :option="option"
             :table-loading="loading"
             :data="data"
             v-model="form"
             ref="crud"
             @selection-change="selectionChange"
             @on-load="onLoad">
    <template #topic="{ row }">
      <el-tag size="large" style="cursor:pointer"
              v-clipboard:copy="row.topic"
              v-clipboard:success="onCopySuccess">
        {{ row.topic }}
      </el-tag>
    </template>
  </avue-crud>
</template>

<script>
import {getTopicList} from "@/api/iot/device";
import { validatenull } from '@/utils/validate';

export default {
  name: 'deviceTopic',
  props: {
    productKey: String,
    deviceId: String,
    deviceName: String,
  },
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      selectionList: [],
      option: {
        height: 'auto',
        searchShow: true,
        searchMenuSpan: 6,
        header: false,
        tip: false,
        border: true,
        index: true,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        menu: false,
        emptyText: '当前设备尚未订阅任何 Topic ，如何订阅请参考文档',
        dialogWidth: 500,
        labelWidth: 120,
        searchLabelWidth: 100,
        column: [
          {
            label: "设备的Topic",
            prop: "topic",
            type: "input",
            span: 24,
          },
          {
            label: "Topic描述",
            prop: "topicDesc",
            type: "input",
            width: 380,
            span: 24,
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  watch: {
    deviceId() {
      if (!validatenull(this.deviceId)) {
        this.onLoad();
      }
    }
  },
  methods: {
    onCopySuccess() {
      this.$message.success('复制成功');
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    onLoad(params = {}) {
      this.loading = true;
      getTopicList(this.productKey, this.deviceName).then(res => {
        this.data = res.data.data;
        this.loading = false;
      });
    }
  }
};
</script>

<style>
</style>
